<template>
  <div class="mybox">
   <div class="header"></div>
    <div class="box">
    <van-image
  round
  width="5rem"
  height="5rem"
  src="https://img01.yzcdn.cn/vant/cat.jpeg"
  class="image"
/>
<div class="minbox">
  <h4>游客</h4>
  <van-button type="primary" class="button" @click="$router.push('/login')" >去登入</van-button>
    </div>
</div>

<div class="body">
<van-grid :column-num="3" :border="false">
  <van-grid-item icon="star-o" text="我的收藏" to="/collect" />
  <van-grid-item icon="wap-home-o" text="我的出租" to="/hireList" />
  <van-grid-item icon="clock-o" text="看房记录" />
  <van-grid-item icon="idcard" text="成为房主" />
  <van-grid-item icon="manager-o" text="个人资料" />
  <van-grid-item icon="service-o" text="联系我们" />
</van-grid>
</div>

<div class="footer">
  <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
</div>
  </div>
</template>

<script>
export default {
  name: 'My',
  props: {},

}
</script>

<style scoped lang="less">
.mybox{
  width: 375px;
  .header{
    position: fixed;
    top: 0;
    width: 100%;
    height: 200px;
    background-image:url(http://liufusong.top:8080/img/profile/bg.png);
   background-size: cover;
  }
}
.box{
  margin: 30% auto;
  margin-bottom: 0;
  position: relative;
    display: flex;
    justify-content: center;
    width: 300px;
    height: 150px;
    background-color: #fff;
    box-shadow: rgb(221,221,221)0px 0px 10px 3px;
    margin-bottom: 10px;
    .image{
      position: absolute;
      top: -30%;
    }
   h4{
    margin: 10px 0;
    font-weight: 400;
    font-size: 13px;
   }
   .minbox{
    padding-top: 35px;
    text-align: center;
    .button{
      height: 35px;
      border-radius: 10%;
    }
   }
}
.footer{
  img{
  width: 300px;
  margin:5% auto;
  margin-left: 10%;
  }

}
</style>